import React from 'react';
import { useFragment } from 'react-relay/hooks';
/**链接的：路由的点击也是要定做的，自定义路由插件。
 * */
import Link from '../routing/Link';
import { IssuesListItem_issue$key } from "./__generated__/IssuesListItem_issue.graphql";
const graphql = require("babel-plugin-relay/macro");

interface Props {
   // user: Todo_user$key;
    //可以多个的；
    //必须对应底下的函数的片段名字！ fragment Todo_todo on Todo
    //片段名还必须在上一级组建内部登记好了。
    issue: IssuesListItem_issue$key;
}
/**
 * Renders a single item (issue) in the issues list.
 */
export default function IssuesListItem(props: Props) {
  // Given a reference to a specific issue - props.issue - define *what*
  // data the component needs about the issue in order to render it.
  // Note that Relay will only give the component access to the exact fields
  // defined in the fragment. Relay will also subscribe for updates to just
  // those fields, updating the component if the values change due to a mutation
  // or the data being refetched.
  const issue = useFragment(
    graphql`
      fragment IssuesListItem_issue on Issue {
        id
        title
      }
    `,
    props.issue,
  );

  // Describe how to render the data:
  return <Link to={`/issue/${issue.id}`}>{issue.title}</Link>;
}
